<template>
  <div class="home positRel">
    <div cldiv="carousel">
      <Carousel v-model="playVal" loop dots="inside" autoplay radius-dot>
        <CarouselItem v-for="(item, index) in shufflingList" :key="index">
          <div
            class="demo-carousel"
            :style="`background-image:url(${item.pic})`"
          ></div>
        </CarouselItem>
      </Carousel>
    </div>
    <div class="show-main">
      <div class="goods">
        <span class="title">商品</span>
        <ul class="good-list">
          <li
            class="good-item"
            @click="jumpShopGoods(item.id, item.content.goodsId)"
            v-for="item in goodList"
            :key="item.id"
          >
            <div class="good-face">
              <div
                class="good-img"
                :style="`background-image:url(${item.content.thumbnail})`"
              ></div>
            </div>
            <div class="good-info">
              {{ item.content.goodsName }}
            </div>
            <p class="price">￥{{ item.content.price }}</p>
          </li>
        </ul>
      </div>
      <div class="course">
        <span class="title">课程</span>
        <div class="course-card-list">
          <div
            class="course-card"
            v-for="(item, index) in courseList"
            :key="index"
            @click="gocourseCenter(item)"
          >
            <p v-if="item.pageTop == '1'" class="topping">置顶</p>
            <div
              class="course-face"
              :style="`background-image:url(${item.coverPath})`"
            ></div>
            <div class="information">
              <span class="introduce"> {{ item.seriesName }}</span>
            </div>
            <div class="teacher-and-price">
              <div class="teacher-face">
                <img :src="item.expertFace" alt="" />
                <span>{{ item.expertName }}</span>
              </div>

              <p v-if="item.isCharge === '0'" class="is-charge0">免费</p>
              <p v-if="item.isCharge === '1'">
                <span v-if="item.buyFlag === 'false'" class="price"
                  ><span>￥</span
                  >{{ item.price ? item.price.toFixed(2) : "" }}</span
                >
                <span v-if="item.buyFlag === 'true'" class="is-charge1"
                  >已购买</span
                >
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 合作伙伴 -->
    <div class="partners">
      <ul class="partners-box">
        <li
          class="partners-info"
          @click="toParthersDetails(item)"
          v-for="item in partnersList"
          :key="item.id"
        >
          <div class="partners-item">
            <img :src="item.partnerPic" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Nav from "@/components/home_nav/nav.vue";
import Footer from "@/components/footer/my_footer.vue";
import {
  getConditionQuery,
  getShuffling,
  getPartnersList,
  getIndexGoods,
} from "@/api/otwoo.js";
import bus from '@/libs/bus.js'
import Cookies from "js-cookie";
export default {
  data() {
    return {
      playVal: 0,
      height: "calc(510 / 1920 * 100vw)",
      courseList: [],
      shufflingList: [],
      partnersList: [],
      params: {
        categoryStr: "",
        courseCategory: "",
        expertName: "",
        keyword: "",
        page: 1,
        rows: 8,
        sortField: "",
        sortType: "",
        userId: "",
      },
      goodList: [],
    };
  },
  components: { Nav, Footer },
  mounted() {
    this.getInit();
    //获取课程列表
    getConditionQuery(this.params).then((res) => {
      this.courseList = res.result.rows;
    });
    //获取轮播图
    getShuffling("pc").then((res) => {
      const { code, result } = res;
      if (code == 200) {
        this.shufflingList = result;
      }
    });
  },
  methods: {
    //商品详情跳转
    jumpShopGoods(skuId, goodsId) {
         bus.$emit('changeNav','market')
      this.$router.push({
        path: "/goodsDetail",
        query: { skuId, goodsId },
      });
   
    },
    getInit() {
      // 获取合作伙伴
      this.getGoodsList();
      getPartnersList().then((res) => {
        const {
          code,
          result: { records },
        } = res;
        if (code == 200) {
          this.partnersList = records || [];
        }
      });
    },
    //获取商品列表
    getGoodsList() {
      getIndexGoods().then((res) => {
        if (res.success) {
          this.goodList = res.result.content;
        }
      });
    },
    gocourseCenter(item) {
      // this.$router.push({
      //   path: "/courseCenter",
      // });
      this.$router.push({
        path: "/courseDetail",
        query: {
          isCharge: item.isCharge,
          payStatus: item.payStatus,
          id: item.id,
        },
      });
    },
    toParthersDetails(item) {
      this.$router.push({
        path: "/partnersDetails",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .carousel {
    height: calc(510 / 1920 * 100vw);
    .demo-carousel {
      height: calc(510 / 1920 * 100vw);
      background-size: cover;
    }
  }
  .show-main {
    padding: 0px calc(260 / 1920 * 100vw);
    .goods,
    .course {
      margin-top: calc(30 / 1920 * 100vw);
      background: #fff;
      border-radius: calc(10 / 1920 * 100vw);
      padding: calc(26 / 1920 * 100vw) calc(26 / 1920 * 100vw)
        calc(60 / 1920 * 100vw);
      .title {
        font-size: calc(24 / 1920 * 100vw);
        color: #333333;
      }
      .goods-card-list {
        display: flex;
        flex-wrap: wrap;
        .goods-card {
          width: 19%;
          box-shadow: calc(4 / 1920 * 100vw) 0px calc(10 / 1920 * 100vw) #efeded;
          padding-bottom: calc(18 / 1920 * 100vw);
          border-radius: calc(5 / 1920 * 100vw);
          overflow: hidden;
        }
      }
      .goods-card-list,
      .course-card-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-top: calc(26 / 1920 * 100vw);

        .course-card {
          width: calc(296 / 1920 * 100vw);
          box-shadow: calc(4 / 1920 * 100vw) 0px calc(10 / 1920 * 100vw) #efeded;
          margin-bottom: calc(18 / 1920 * 100vw);
          border-radius: calc(5 / 1920 * 100vw);
          overflow: hidden;
          cursor: pointer;
          position: relative;
          .topping {
            position: absolute;
            left: calc(-25 / 1920 * 100vw);
            top: calc(15 / 1920 * 100vw);
            width: calc(110 / 1920 * 100vw);
            height: calc(25 / 1920 * 100vw);
            line-height: calc(25 / 1920 * 100vw);
            text-align: center;
            color: #fff;
            font-size: calc(10 / 1920 * 100vw);
            background-color: #fb6d74;
            transform: rotate(320deg);
            transform-origin: center;
          }
          .shop-face,
          .course-face {
            width: calc(296 / 1920 * 100vw);
            height: calc(170 / 1920 * 100vw);
            background-color: #efeded;
            background-size: cover;
          }
          .information {
            padding: 0px calc(10 / 1920 * 100vw);
            display: flex;
            flex-direction: column;
            min-height: 50px;
            .introduce {
              display: block;
              line-height: calc(22 / 1920 * 100vw);
              margin-top: calc(12 / 1920 * 100vw);
              font-size: calc(14 / 1920 * 100vw);
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              -ms-text-overflow: ellipsis;
              text-overflow: ellipsis;
            }
            .price {
              margin-left: auto;
              display: block;
              font-size: calc(18 / 1920 * 100vw);
              color: #f4333c !important;
              margin-top: calc(14 / 1920 * 100vw);
              > span {
                font-size: calc(12 / 1920 * 100vw);
              }
            }
          }
        }
      }
    }
    .goods {
      padding-bottom: 0 !important;
    }
    .course {
      .is-charge0 {
        color: #0bd7d7;
        display: block;
        padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
        border-radius: calc(3 / 1920 * 100vw);
        background: #dbf9f9;
        font-size: 12px;
        text-align: center;
        line-height: calc(18 / 1920 * 100vw);
      }

      .is-charge1 {
        color: #ff900d;
        display: block;
        padding: calc(4 / 1920 * 100vw) calc(10 / 1920 * 100vw);
        border-radius: calc(3 / 1920 * 100vw);
        background: #ffeedb;
        font-size: 12px;
        text-align: center;
        line-height: calc(18 / 1920 * 100vw);
      }
      .teacher-and-price {
        padding: 0px calc(10 / 1920 * 100vw);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: calc(14 / 1920 * 100vw) 0;
        .teacher-face {
          display: flex;
          align-items: center;
          > img {
            width: calc(24 / 1920 * 100vw);
            height: calc(24 / 1920 * 100vw);
            border-radius: calc(12 / 1920 * 100vw);
          }
          > span {
            font-size: calc(12 / 1920 * 100vw);
            color: #63676e;
            margin-left: calc(6 / 1920 * 100vw);
          }
        }
        .price {
          margin-left: auto;
          display: block;
          font-size: calc(18 / 1920 * 100vw);
          color: #f4333c !important;
          > span {
            font-size: calc(12 / 1920 * 100vw);
          }
        }
      }
    }
  }
  .partners {
    display: flex;
    justify-content: center;
    padding-top: 160px;
    width: 100%;
    height: calc(740 / 1920 * 100vw);
    margin-top: 30px;
    position: relative;
    background: url("../../assets/images/partners_bg.png") no-repeat;
    background-size: 100% 100%;
    .partners-box {
      display: flex;
      align-content: center;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 80%;
      .partners-info {
        position: relative;
        width: 25%;

        .partners-item {
          margin: 16px 36px 18px 36px;
          max-height: 140px;
          background: black;
          overflow: hidden;
          img {
            width: 100%;
            height: 140px;
          }
        }
        &:nth-of-type(1),
        &:nth-of-type(2),
        &:nth-of-type(3),
        &:nth-of-type(4) {
          .partners-item {
            margin-top: 0;
          }
        }

        // &::before {
        //   position: absolute;
        //   content: "";
        //   width: 1px;
        //   height: 100%;
        //   background: #8d95a2;
        //   opacity: 0.75;
        //   right: 0;
        // }
        // &::after {
        //   position: absolute;
        //   content: "";
        //   width: 100%;
        //   height: 1px;
        //   background: #8d95a2;
        //   opacity: 0.75;
        //   bottom: 0;
        // }
        &:nth-child(4n)::before {
          display: none;
          content: none;
        }
        &:nth-of-type(5)::after,
        &:nth-of-type(6)::after,
        &:nth-of-type(7)::after,
        &:nth-of-type(8)::after {
          display: none;
          content: none;
        }
      }
    }
  }
  // .copyright-row{
  //   height: calc(40 / 1920 * 100vw);
  //   background: #414141;
  //   text-align: center;
  //   line-height: calc(40 / 1920 * 100vw);
  //   color: #fff;
  //   font-size: calc(16 / 1920 * 100vw);
  //   margin-top: calc(90 / 1920 * 100vw);
  // }
}
.good-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(26 / 1920 * 100vw);
  .good-item:hover {
    box-shadow: 10px 10px 10px;
  }
  .good-item {
    cursor: pointer;
    width: 24%;
    margin: 0 1% 48px 0;
    background: #ffffff;
    box-shadow: 0px 4px 10px 0px #efeded;
    border-radius: 5px;
    .good-face {
      padding: 20px;
      background: #e1e1e1;
      border-radius: 4px 4px 0 0;
    }
    .good-img {
      height: 170px;
      overflow: hidden;
      border-radius: 0;
      background-size: 100% 100%;
      max-width: 220px;
      margin: auto;
    }
    .good-info {
      margin: 15px 10px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      cursor: pointer;
      .text {
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
    .price {
      color: #f4333c;
      text-align: right;
      padding: 0 10px;
    }
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}
:deep(.radius) {
  height: calc(10 / 1920 * 100vw) !important;
  width: calc(10 / 1920 * 100vw) !important;
}
</style>
